<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据绑定</title>
  <script src="../js/vue.js"></script>
</head>
<body>

<div class="container">
  <div id="root">
<!--    数据只能从data流向页面-->
<!--    单向数据绑定:<input type="text" v-bind:value="cty">-->
<!--    简写-->
    单向数据绑定:<input type="text" :value="cty">
    <br>
<!--    双向数据绑定 数据会从data流向页面 也会从页面流向数据-->
<!--    双向数据绑定:<input type="text" v-model:value="cty">-->
<!--    简写-->
    双向数据绑定:<input type="text" v-model="cty">
<!--    v-model只能操作表单型标签 (输入型) 并且会自动寻找标签的value属性 下面是错误示范-->
<!--    <h2 v-model:x="cty">你好</h2>-->
  </div>
</div>
<script>
  Vue.config.productionTip = false;
  Vue.config.devtools = true;
  new Vue({
    el:'#root',
    data:{
      cty:'彭于晏'
    }
  });
</script>
</body>
</html>